<html >
    <head>
        <meta charset="utf-8">
        <meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no, width=device-width">
        <title>历史记录</title>
        <link rel="stylesheet" href="../ionic-v1.3.3/css/ionic.css" />
        <script type="text/javascript" src="../ionic-v1.3.3/js/ionic.bundle.min.js" ></script>
    </head>
    <style type="text/css">
      html{font-size: 20px;}
      
      .bar-positive h4{
            background-color: #07E9A1;
            text-align: center;
            color: #fff;
            height: 2rem;
            line-height: 2rem;
            margin-top: 0;
       }
       .card img{
          height: 1rem;
          width: 1rem;
          vertical-align: middle;
          margin-right: 0.5rem;
       }
       .item-top{
          line-height: 1rem;
          color: #C0BFBE;
          font-size: 18px;
       }
        .item-footer {
          text-align: center;
          padding-top: 1rem;
        }
      .item-footer b{
          font-size: 50px;
          font-weight: 500;
          display: block;
          border-right: 1px solid #D3D3D2;
        }
      .item-footer p{
        font-size: 14px;
        color: #778EA5;
        margin-top: 2rem;
      }
      .item-divider{
        background-color: #FBFAF8;
      }
      .card{
        margin: 5px 10px;
      }

    </style>
    <body>
        <ion-header-bar  class="bar-positive">
             <h4 class="title">历史记录</h4>
        </ion-header-bar>

        <ion-content>
          <div class="row">
              <div class="col">
                <div class="card">
                    <div class="item item-divider item-top">
                     <img src="../img/lishijilu.png"/>2017.06.08
                    </div>
                    <div class="item item-divider item-footer">
                      <div class="row">
                         <div class="col">
                           <b>6</b>
                          
                            <p>今日活跃 /h</p>
                         </div>
                         <div class="col">
                            <b>6</b>
                          
                           <p>今日睡眠 /h</p>
                         </div>
                         <div class="col">
                            <b style="border:0">6</b>
                            
                            <p>卡路里 /千卡</p>
                         </div>
                      </div>
                    </div>
                </div>
              </div>
          </div>
          
           <div class="row">
              <div class="col">
                <div class="card">
                    <div class="item item-divider item-top">
                     <img src="../img/lishijilu.png"/>2017.06.08
                    </div>
                    <div class="item item-divider item-footer">
                      <div class="row">
                         <div class="col">
                           <b>6</b>
                          
                            <p>今日活跃 /h</p>
                         </div>
                         <div class="col">
                            <b>6</b>
                          
                           <p>今日睡眠 /h</p>
                         </div>
                         <div class="col">
                            <b style="border:0">6</b>
                            
                            <p>卡路里 /千卡</p>
                         </div>
                      </div>
                    </div>
                </div>
              </div>
          </div>
           <div class="row">
              <div class="col">
                <div class="card">
                    <div class="item item-divider item-top">
                     <img src="../img/lishijilu.png"/>2017.06.08
                    </div>
                    <div class="item item-divider item-footer">
                      <div class="row">
                         <div class="col">
                           <b>6</b>
                          
                            <p>今日活跃 /h</p>
                         </div>
                         <div class="col">
                            <b>6</b>
                          
                           <p>今日睡眠 /h</p>
                         </div>
                         <div class="col">
                            <b style="border:0">6</b>
                            
                            <p>卡路里 /千卡</p>
                         </div>
                      </div>
                    </div>
                </div>
              </div>
          </div>

        </ion-content>

    
  </body>
</html>
